import React, { Component } from 'react'
import './list.css'
let count = 0
class PropListItem extends Component {

  constructor(props) {
    super(props);
    // 如果不写下面这句会报警告
    this.state = {
      count: 0
    };
    // 第二种设置this方法
    // this.handleDecrease = this.handleDecrease.bind(this)
  }
  // onClick={this.handleDecrease} 这样调用下面方法时this是空的
  // handleDecrease () {
  //   console.log(this)
  // }
  // 推荐
  handleCount () {
    if (this.state.count <= 0) {
      this.setState({
        count: 0
      })
    }
  }
  handleDecrease = (ev) => {
    console.log(ev, this)
    this.setState({
      count: this.state.count - 1
    })
    this.handleCount()
  }
  handleAdd = () => {
    console.log(this.props.data.id)
    this.setState({
      count: this.state.count + 1
    })
  }
  render () {
    let data = this.props.data
    return (
      <div className="item-row">
        <div className="item-col">{data.name}</div>
        <div className="item-col">{data.price}</div>
        {/* 三目运算符来作条件判断 */}
        <div className={`item-col item-col-count${count < 1 ? '' : '-s' }`}>
          <button type="button" onClick={this.handleDecrease}>-</button>
            <span>{this.state.count}</span>
          <button type="button" onClick={this.handleAdd}>+</button>
        </div>
        <div>
          <button type="text" onClick={() => { this.props.onDelete(this.props.data.id)}}>删除</button>
        </div>
      </div>
    )
  }
}
export default PropListItem